<template>
	<view>
		<divider />
		
		<card headTitle="申请售后的产品" cardStyle="background:#FFFFFF;">
			<view class="d-flex a-center py-2 px-3">
				<image src="../../static/images/demo/demo9.jpg" mode="widthFix" style="width: 100rpx; height: 100rpx;"></image>
				<view class="flex-1 ml-3">
					<view class="font-lg">花椒锅巴</view>
					<view class="font-md text-light-muted">
						退货服务剩余5天
					</view>
				</view>
			</view>
		</card>
		<divider />
		<card headTitle="服务类型" bodyPadding cardStyle="background:#FFFFFF;">
			<hc-radio-group :label="label2" :selected.sync="label2.selected"></hc-radio-group>
		</card>
		<divider />
		<card headTitle="问题描述" bodyPadding cardStyle="background:#FFFFFF;">
			<view class="position-relative">
				<textarea value="" placeholder="请详细描述你遇到的问题" :maxlength="maxlength" style="width: 100%;height: 280rpx;box-sizing: border-box;" class="border rounded p-2" v-model="content" />
				<view class="position-absolute font" :class="remain >= 0 ? 'text-light-muted' : 'text-danger'" style="right:10rpx;bottom: 5rpx;">
					{{remain}}/{{maxlength}}
				</view>
			</view>
		</card>
		<view class="p-3">
			<view class="rounded main-bg-color text-white text-center py-2 font-md" hover-class="main-bg-hover-color">下一步</view>
		</view>
	</view>
</template>

<script>
	import hcRadioGroup from "@/components/common/radio-group.vue";
	import card from "@/components/common/card.vue"
	export default {
		components:{
			card,
			hcRadioGroup
		},
		data() {
			return {
				label2: {
					selected: 0,
					list: [{
							name: "维修"
						},{
							name: "退换"
						}
					]
				},
				content:"",
				maxlength:50
			}
		},
		computed:{
			// 剩余可输入字数
			remain(){
				return this.maxlength - this.content.length
			}
		},
		methods: {
			
		}
	}
</script>

<style>
page{
	background-color: #eee;
}
</style>
